<template>
  <div class="w-full flex flex-row border-b border-gray-300">
    <div class="h-[60px] flex flex-row">
      <img class="h-[60px] w-[60px] p-3" src="../assets/nav_logo.jpg" alt="" />
      <span class="leading-[60px] font-bold text-2xl pr-3">
        超时空战士吧 - 国服服务器数据 v0.10.13
      </span>
    </div>
    <el-menu
      :default-active="onRoutes"
      mode="horizontal"
      :router="true"
      class="w-0 flex-1 justify-end pr-3"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/map">地图</el-menu-item>
      <el-menu-item index="/game">H5测试版游玩</el-menu-item>
      <el-menu-item index="/login">管理员登录</el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const onRoutes = computed(() => {
  return route.path;
});
</script>